<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命管理热力图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #ffffff;
            color: #24292f;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            background-color: #f6f8fa;
            border-radius: 6px;
            padding: 20px;
            margin-top: 30px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #d0d7de;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 24px;
            color: #0969da;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .description {
            color: #57606a;
            font-size: 14px;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .dimensions-info {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }

        .dimension {
            display: flex;
            align-items: center;
            font-size: 14px;
            padding: 5px 12px;
            border-radius: 20px;
            background-color: #f6f8fa;
        }

        .dimension-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 15px;
            font-size: 13px;
            color: #57606a;
        }

        .legend span {
            margin: 0 5px;
        }

        .legend-colors {
            display: flex;
            margin-left: 5px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            margin: 0 2px;
            border-radius: 2px;
        }

        .heatmap-container {
            overflow-x: auto;
            margin-top: 20px;
        }

        .heatmap {
            display: flex;
            padding: 15px;
            background-color: #fafbfc;
            border-radius: 6px;
            border: 1px solid #e1e4e8;
        }

        .months {
            display: flex;
            margin-left: 40px;
            margin-bottom: 5px;
            font-size: 10px;
            color: #57606a;
        }

        .month {
            width: 11.5px;
            text-align: center;
            margin: 0 2px;
        }

        .days {
            display: flex;
            flex-direction: column;
            font-size: 11px;
            margin-right: 5px;
            margin-top: -1px;
            color: #57606a;
        }

        .day {
            height: 12px;
            text-align: right;
            margin: 2px 0;
        }

        .cells {
            display: flex;
            flex-direction: row;
        }

        .week-column {
            display: flex;
            flex-direction: column;
        }

        .cell {
            width: 12px;
            height: 12px;
            margin: 2px;
            border-radius: 2px;
            background-color: #ebedf0;
            position: relative;
            border: 1px solid rgba(27, 31, 35, 0.06);
            transition: transform 0.1s ease;
        }

        .cell:hover {
            transform: scale(1.2) translateZ(0);
            /* 添加 translateZ(0) */
            z-index: 1000;
            /* 确保单元格本身也有较高的 z-index */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            position: relative;
            /* 确保 z-index 生效 */
        }

        .heatmap-container {
            overflow: visible;
            /* 允许内容溢出 */
        }

        .cells {
            position: relative;
        }

        .cell:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            background-color: #1a1a1a;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-line;
            z-index: 100;
            font-size: 12px;
            line-height: 1.6;
            min-width: 180px;
            text-align: left;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .score-0 { background-color: #eeeeee; }    /* 0-10分 */
        .score-1 { background-color: #c6e48b; }    /* 10-15分 */
        .score-2 { background-color: #7bc96f; }    /* 15-20分 */
        .score-3 { background-color: #49a14e; }    /* 20-22分 */
        .score-4 { background-color: #2e8845; }    /* 22-24分 */
        .score-5 { background-color: #19692c; }    /* 25分 */

        @media (max-width: 768px) {
            .heatmap-container {
                overflow-x: scroll;
            }

            .months {
                margin-left: 25px;
            }

            .month {
                font-size: 9px;
            }

            .day {
                font-size: 9px;
            }

            .dimensions-info {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>生命管理热力图</h1>
        <p class="description">追踪您每天在五个关键维度上的表现：学习、运动、睡眠、娱乐和陪伴</p>
    </header>

    <div class="container">
        <div class="heatmap-container">
            <div class="months" id="months"></div>
            <div style="display: flex;">
                <div class="days" id="days"></div>
                <div class="cells" id="cells"></div>
            </div>
        </div>

        <div class="legend">
            <span>较差</span>
            <div class="legend-colors">
                <div class="legend-color score-0"></div>
                <div class="legend-color score-1"></div>
                <div class="legend-color score-2"></div>
                <div class="legend-color score-3"></div>
                <div class="legend-color score-4"></div>
                <div class="legend-color score-5"></div>
            </div>
            <span>优秀</span>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 示例数据 - 每个日期包含五个维度的得分(0-5)
            const lifeData = {
    // 1月份数据
    "2025-01-01": { study: 0, exercise: 0, sleep: 5, entertainment: 5, family: 5 },
    "2025-01-02": { study: 1, exercise: 2, sleep: 4, entertainment: 3, family: 4 },
    "2025-01-03": { study: 2, exercise: 3, sleep: 5, entertainment: 2, family: 3 },
    "2025-01-04": { study: 3, exercise: 1, sleep: 4, entertainment: 4, family: 2 },
    "2025-01-05": { study: 4, exercise: 4, sleep: 3, entertainment: 1, family: 1 },
    "2025-01-06": { study: 5, exercise: 5, sleep: 2, entertainment: 0, family: 0 },
    "2025-01-07": { study: 3, exercise: 2, sleep: 5, entertainment: 3, family: 4 },
    "2025-01-08": { study: 2, exercise: 4, sleep: 4, entertainment: 2, family: 5 },
    "2025-01-09": { study: 1, exercise: 1, sleep: 3, entertainment: 5, family: 3 },
    "2025-01-10": { study: 0, exercise: 3, sleep: 5, entertainment: 4, family: 2 },
    "2025-01-11": { study: 2, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-01-12": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 5 },
    "2025-01-13": { study: 5, exercise: 1, sleep: 5, entertainment: 2, family: 3 },
    "2025-01-14": { study: 3, exercise: 4, sleep: 4, entertainment: 3, family: 4 },
    "2025-01-15": { study: 1, exercise: 3, sleep: 3, entertainment: 5, family: 2 },
    "2025-01-16": { study: 2, exercise: 0, sleep: 5, entertainment: 4, family: 1 },
    "2025-01-17": { study: 4, exercise: 2, sleep: 4, entertainment: 1, family: 5 },
    "2025-01-18": { study: 5, exercise: 5, sleep: 3, entertainment: 0, family: 3 },
    "2025-01-19": { study: 3, exercise: 1, sleep: 5, entertainment: 3, family: 4 },
    "2025-01-20": { study: 1, exercise: 4, sleep: 4, entertainment: 2, family: 2 },
    "2025-01-21": { study: 0, exercise: 2, sleep: 3, entertainment: 5, family: 1 },
    "2025-01-22": { study: 2, exercise: 3, sleep: 5, entertainment: 4, family: 5 },
    "2025-01-23": { study: 4, exercise: 0, sleep: 4, entertainment: 1, family: 3 },
    "2025-01-24": { study: 5, exercise: 2, sleep: 3, entertainment: 0, family: 4 },
    "2025-01-25": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 2 },
    "2025-01-26": { study: 1, exercise: 1, sleep: 4, entertainment: 2, family: 1 },
    "2025-01-27": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 5 },
    "2025-01-28": { study: 2, exercise: 3, sleep: 5, entertainment: 4, family: 3 },
    "2025-01-29": { study: 4, exercise: 2, sleep: 4, entertainment: 1, family: 4 },
    "2025-01-30": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 2 },
    "2025-01-31": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 1 },
    
    // 2月份数据
    "2025-02-01": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 5 },
    "2025-02-02": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 3 },
    "2025-02-03": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 4 },
    "2025-02-04": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 2 },
    "2025-02-05": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 1 },
    "2025-02-06": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 5 },
    "2025-02-07": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 3 },
    "2025-02-08": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 4 },
    "2025-02-09": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 2 },
    "2025-02-10": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-02-11": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 5 },
    "2025-02-12": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 3 },
    "2025-02-13": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 4 },
    "2025-02-14": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 2 },
    "2025-02-15": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 1 },
    "2025-02-16": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 5 },
    "2025-02-17": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 3 },
    "2025-02-18": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 4 },
    "2025-02-19": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 2 },
    "2025-02-20": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 1 },
    "2025-02-21": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 5 },
    "2025-02-22": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 3 },
    "2025-02-23": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 4 },
    "2025-02-24": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 2 },
    "2025-02-25": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 1 },
    "2025-02-26": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 5 },
    "2025-02-27": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 3 },
    "2025-02-28": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 4 },

    // 3月份数据（包含您提供的部分数据）
    "2025-03-01": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 2 },
    "2025-03-02": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 1 },
    "2025-03-03": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 5 },
    "2025-03-04": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 3 },
    "2025-03-05": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 4 },
    "2025-03-06": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 2 },
    "2025-03-07": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 1 },
    "2025-03-08": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 5 },
    "2025-03-09": { study: 1, exercise: 2, sleep: 4, entertainment: 2, family: 3 },
    "2025-03-10": { study: 0, exercise: 4, sleep: 3, entertainment: 5, family: 4 },
    "2025-03-11": { study: 2, exercise: 1, sleep: 5, entertainment: 4, family: 2 },
    "2025-03-12": { study: 4, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-03-13": { study: 5, exercise: 0, sleep: 3, entertainment: 0, family: 5 },
    "2025-03-14": { study: 3, exercise: 5, sleep: 5, entertainment: 3, family: 3 },
    "2025-03-15": { study: 1, exercise: 1, sleep: 1, entertainment: 2, family: 1 },
    "2025-03-16": { study: 5, exercise: 2, sleep: 4, entertainment: 3, family: 5 },
    "2025-03-17": { study: 3, exercise: 4, sleep: 3, entertainment: 4, family: 3 },
    "2025-03-18": { study: 2, exercise: 5, sleep: 4, entertainment: 2, family: 4 },
    "2025-03-19": { study: 4, exercise: 1, sleep: 5, entertainment: 3, family: 2 },
    "2025-03-20": { study: 5, exercise: 3, sleep: 4, entertainment: 5, family: 3 },
    "2025-03-21": { study: 3, exercise: 4, sleep: 3, entertainment: 4, family: 5 },
    "2025-03-22": { study: 2, exercise: 2, sleep: 5, entertainment: 5, family: 4 },
    "2025-03-23": { study: 4, exercise: 3, sleep: 4, entertainment: 3, family: 5 },
    "2025-03-24": { study: 5, exercise: 4, sleep: 3, entertainment: 2, family: 3 },
    "2025-03-25": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 2 },
    "2025-03-26": { study: 4, exercise: 2, sleep: 5, entertainment: 3, family: 4 },
    "2025-03-27": { study: 2, exercise: 3, sleep: 4, entertainment: 5, family: 3 },
    "2025-03-28": { study: 5, exercise: 4, sleep: 3, entertainment: 2, family: 5 },
    "2025-03-29": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 3 },
    "2025-03-30": { study: 4, exercise: 3, sleep: 5, entertainment: 3, family: 4 },
    "2025-03-31": { study: 2, exercise: 2, sleep: 4, entertainment: 4, family: 5 },

    // 4月份数据（包含您提供的部分数据）
    "2025-04-01": { study: 5, exercise: 2, sleep: 4, entertainment: 5, family: 3 },
    "2025-04-02": { study: 3, exercise: 4, sleep: 3, entertainment: 4, family: 5 },
    "2025-04-03": { study: 4, exercise: 3, sleep: 5, entertainment: 2, family: 4 },
    "2025-04-04": { study: 2, exercise: 5, sleep: 4, entertainment: 3, family: 5 },
    "2025-04-05": { study: 5, exercise: 4, sleep: 3, entertainment: 4, family: 2 },
    "2025-04-06": { study: 3, exercise: 2, sleep: 5, entertainment: 5, family: 4 },
    "2025-04-07": { study: 4, exercise: 3, sleep: 4, entertainment: 3, family: 5 },
    "2025-04-08": { study: 5, exercise: 4, sleep: 3, entertainment: 2, family: 3 },
    "2025-04-09": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 2 },
    "2025-04-10": { study: 4, exercise: 2, sleep: 5, entertainment: 3, family: 4 },
    "2025-04-11": { study: 2, exercise: 3, sleep: 4, entertainment: 5, family: 3 },
    "2025-04-12": { study: 5, exercise: 4, sleep: 3, entertainment: 2, family: 5 },
    "2025-04-13": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 3 },
    "2025-04-14": { study: 4, exercise: 3, sleep: 5, entertainment: 3, family: 4 },
    "2025-04-15": { study: 2, exercise: 2, sleep: 4, entertainment: 4, family: 5 },
    "2025-04-16": { study: 5, exercise: 3, sleep: 3, entertainment: 2, family: 3 },
    "2025-04-17": { study: 3, exercise: 4, sleep: 5, entertainment: 5, family: 2 },
    "2025-04-18": { study: 4, exercise: 1, sleep: 4, entertainment: 3, family: 4 },
    "2025-04-19": { study: 2, exercise: 5, sleep: 3, entertainment: 1, family: 1 },
    "2025-04-20": { study: 0, exercise: 2, sleep: 5, entertainment: 4, family: 5 },
    "2025-04-21": { study: 1, exercise: 3, sleep: 4, entertainment: 2, family: 3 },
    "2025-04-22": { study: 3, exercise: 0, sleep: 3, entertainment: 5, family: 2 },
    "2025-04-23": { study: 5, exercise: 4, sleep: 5, entertainment: 1, family: 4 },
    "2025-04-24": { study: 4, exercise: 2, sleep: 4, entertainment: 3, family: 1 },
    "2025-04-25": { study: 2, exercise: 5, sleep: 3, entertainment: 0, family: 5 },
    "2025-04-26": { study: 0, exercise: 1, sleep: 5, entertainment: 4, family: 3 },
    "2025-04-27": { study: 1, exercise: 3, sleep: 4, entertainment: 2, family: 2 },
    "2025-04-28": { study: 3, exercise: 0, sleep: 3, entertainment: 5, family: 4 },
    "2025-04-29": { study: 5, exercise: 4, sleep: 5, entertainment: 1, family: 1 },
    "2025-04-30": { study: 4, exercise: 2, sleep: 4, entertainment: 3, family: 5 },

    // 5月份数据
    "2025-05-01": { study: 0, exercise: 0, sleep: 5, entertainment: 5, family: 5 },
    "2025-05-02": { study: 1, exercise: 2, sleep: 4, entertainment: 4, family: 4 },
    "2025-05-03": { study: 2, exercise: 3, sleep: 3, entertainment: 3, family: 3 },
    "2025-05-04": { study: 3, exercise: 4, sleep: 5, entertainment: 2, family: 2 },
    "2025-05-05": { study: 4, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-05-06": { study: 5, exercise: 1, sleep: 3, entertainment: 0, family: 0 },
    "2025-05-07": { study: 3, exercise: 2, sleep: 5, entertainment: 5, family: 5 },
    "2025-05-08": { study: 2, exercise: 3, sleep: 4, entertainment: 4, family: 4 },
    "2025-05-09": { study: 1, exercise: 4, sleep: 3, entertainment: 3, family: 3 },
    "2025-05-10": { study: 0, exercise: 5, sleep: 5, entertainment: 2, family: 2 },
    "2025-05-11": { study: 2, exercise: 1, sleep: 4, entertainment: 1, family: 1 },
    "2025-05-12": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 0 },
    "2025-05-13": { study: 5, exercise: 3, sleep: 5, entertainment: 5, family: 5 },
    "2025-05-14": { study: 3, exercise: 4, sleep: 4, entertainment: 4, family: 4 },
    "2025-05-15": { study: 1, exercise: 5, sleep: 3, entertainment: 3, family: 3 },
    "2025-05-16": { study: 0, exercise: 1, sleep: 5, entertainment: 2, family: 2 },
    "2025-05-17": { study: 2, exercise: 2, sleep: 4, entertainment: 1, family: 1 },
    "2025-05-18": { study: 4, exercise: 3, sleep: 3, entertainment: 0, family: 0 },
    "2025-05-19": { study: 5, exercise: 4, sleep: 5, entertainment: 5, family: 5 },
    "2025-05-20": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 4 },
    "2025-05-21": { study: 1, exercise: 1, sleep: 3, entertainment: 3, family: 3 },
    "2025-05-22": { study: 0, exercise: 2, sleep: 5, entertainment: 2, family: 2 },
    "2025-05-23": { study: 2, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-05-24": { study: 4, exercise: 4, sleep: 3, entertainment: 0, family: 0 },
    "2025-05-25": { study: 5, exercise: 5, sleep: 5, entertainment: 5, family: 5 },
    "2025-05-26": { study: 3, exercise: 1, sleep: 4, entertainment: 4, family: 4 },
    "2025-05-27": { study: 1, exercise: 2, sleep: 3, entertainment: 3, family: 3 },
    "2025-05-28": { study: 0, exercise: 3, sleep: 5, entertainment: 2, family: 2 },
    "2025-05-29": { study: 2, exercise: 4, sleep: 4, entertainment: 1, family: 1 },
    "2025-05-30": { study: 4, exercise: 5, sleep: 3, entertainment: 0, family: 0 },
    "2025-05-31": { study: 5, exercise: 1, sleep: 5, entertainment: 5, family: 5 },

    // 6月份数据
    "2025-06-01": { study: 3, exercise: 2, sleep: 4, entertainment: 4, family: 4 },
    "2025-06-02": { study: 1, exercise: 3, sleep: 3, entertainment: 3, family: 3 },
    "2025-06-03": { study: 0, exercise: 4, sleep: 5, entertainment: 2, family: 2 },
    "2025-06-04": { study: 2, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-06-05": { study: 4, exercise: 1, sleep: 3, entertainment: 0, family: 0 },
    "2025-06-06": { study: 5, exercise: 2, sleep: 5, entertainment: 5, family: 5 },
    "2025-06-07": { study: 3, exercise: 3, sleep: 4, entertainment: 4, family: 4 },
    "2025-06-08": { study: 1, exercise: 4, sleep: 3, entertainment: 3, family: 3 },
    "2025-06-09": { study: 0, exercise: 5, sleep: 5, entertainment: 2, family: 2 },
    "2025-06-10": { study: 2, exercise: 1, sleep: 4, entertainment: 1, family: 1 },
    "2025-06-11": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 0 },
    "2025-06-12": { study: 5, exercise: 3, sleep: 5, entertainment: 5, family: 5 },
    "2025-06-13": { study: 3, exercise: 4, sleep: 4, entertainment: 4, family: 4 },
    "2025-06-14": { study: 1, exercise: 5, sleep: 3, entertainment: 3, family: 3 },
    "2025-06-15": { study: 0, exercise: 1, sleep: 5, entertainment: 2, family: 2 },
    "2025-06-16": { study: 2, exercise: 2, sleep: 4, entertainment: 1, family: 1 },
    "2025-06-17": { study: 4, exercise: 3, sleep: 3, entertainment: 0, family: 0 },
    "2025-06-18": { study: 5, exercise: 4, sleep: 5, entertainment: 5, family: 5 },
    "2025-06-19": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 4 },
    "2025-06-20": { study: 1, exercise: 1, sleep: 3, entertainment: 3, family: 3 },
    "2025-06-21": { study: 0, exercise: 2, sleep: 5, entertainment: 2, family: 2 },
    "2025-06-22": { study: 2, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-06-23": { study: 4, exercise: 4, sleep: 3, entertainment: 0, family: 0 },
    "2025-06-24": { study: 5, exercise: 5, sleep: 5, entertainment: 5, family: 5 },
    "2025-06-25": { study: 3, exercise: 1, sleep: 4, entertainment: 4, family: 4 },
    "2025-06-26": { study: 1, exercise: 2, sleep: 3, entertainment: 3, family: 3 },
    "2025-06-27": { study: 0, exercise: 3, sleep: 5, entertainment: 2, family: 2 },
    "2025-06-28": { study: 2, exercise: 4, sleep: 4, entertainment: 1, family: 1 },
    "2025-06-29": { study: 4, exercise: 5, sleep: 3, entertainment: 0, family: 0 },
    "2025-06-30": { study: 5, exercise: 1, sleep: 5, entertainment: 5, family: 5 },

    // 7月份数据
    "2025-07-01": { study: 2, exercise: 2, sleep: 4, entertainment: 4, family: 4 },
    "2025-07-02": { study: 0, exercise: 3, sleep: 3, entertainment: 3, family: 3 },
    "2025-07-03": { study: 3, exercise: 4, sleep: 5, entertainment: 2, family: 2 },
    "2025-07-04": { study: 1, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-07-05": { study: 4, exercise: 1, sleep: 3, entertainment: 0, family: 0 },
    "2025-07-06": { study: 5, exercise: 2, sleep: 5, entertainment: 5, family: 5 },
    "2025-07-07": { study: 3, exercise: 3, sleep: 4, entertainment: 4, family: 4 },
    "2025-07-08": { study: 1, exercise: 4, sleep: 3, entertainment: 3, family: 3 },
    "2025-07-09": { study: 0, exercise: 5, sleep: 5, entertainment: 2, family: 2 },
    "2025-07-10": { study: 2, exercise: 1, sleep: 4, entertainment: 1, family: 1 },
    "2025-07-11": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 0 },
    "2025-07-12": { study: 5, exercise: 3, sleep: 5, entertainment: 5, family: 5 },
    "2025-07-13": { study: 3, exercise: 4, sleep: 4, entertainment: 4, family: 4 },
    "2025-07-14": { study: 1, exercise: 5, sleep: 3, entertainment: 3, family: 3 },
    "2025-07-15": { study: 0, exercise: 1, sleep: 5, entertainment: 2, family: 2 },
    "2025-07-16": { study: 2, exercise: 2, sleep: 4, entertainment: 1, family: 1 },
    "2025-07-17": { study: 4, exercise: 3, sleep: 3, entertainment: 0, family: 0 },
    "2025-07-18": { study: 5, exercise: 4, sleep: 5, entertainment: 5, family: 5 },
    "2025-07-19": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 4 },
    "2025-07-20": { study: 1, exercise: 1, sleep: 3, entertainment: 3, family: 3 },
    "2025-07-21": { study: 0, exercise: 2, sleep: 5, entertainment: 2, family: 2 },
    "2025-07-22": { study: 2, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-07-23": { study: 4, exercise: 4, sleep: 3, entertainment: 0, family: 0 },
    "2025-07-24": { study: 5, exercise: 5, sleep: 5, entertainment: 5, family: 5 },
    "2025-07-25": { study: 3, exercise: 1, sleep: 4, entertainment: 4, family: 4 },
    "2025-07-26": { study: 1, exercise: 2, sleep: 3, entertainment: 3, family: 3 },
    "2025-07-27": { study: 0, exercise: 3, sleep: 5, entertainment: 2, family: 2 },
    "2025-07-28": { study: 2, exercise: 4, sleep: 4, entertainment: 1, family: 1 },
    "2025-07-29": { study: 4, exercise: 5, sleep: 3, entertainment: 0, family: 0 },
    "2025-07-30": { study: 5, exercise: 1, sleep: 5, entertainment: 5, family: 5 },
    "2025-07-31": { study: 3, exercise: 2, sleep: 4, entertainment: 4, family: 4 },

    // 8月份数据
    "2025-08-01": { study: 1, exercise: 3, sleep: 3, entertainment: 3, family: 3 },
    "2025-08-02": { study: 0, exercise: 4, sleep: 5, entertainment: 2, family: 2 },
    "2025-08-03": { study: 2, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-08-04": { study: 4, exercise: 1, sleep: 3, entertainment: 0, family: 0 },
    "2025-08-05": { study: 5, exercise: 2, sleep: 5, entertainment: 5, family: 5 },
    "2025-08-06": { study: 3, exercise: 3, sleep: 4, entertainment: 4, family: 4 },
    "2025-08-07": { study: 1, exercise: 4, sleep: 3, entertainment: 3, family: 3 },
    "2025-08-08": { study: 0, exercise: 5, sleep: 5, entertainment: 2, family: 2 },
    "2025-08-09": { study: 2, exercise: 1, sleep: 4, entertainment: 1, family: 1 },
    "2025-08-10": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 0 },
    "2025-08-11": { study: 5, exercise: 3, sleep: 5, entertainment: 5, family: 5 },
    "2025-08-12": { study: 3, exercise: 4, sleep: 4, entertainment: 4, family: 4 },
    "2025-08-13": { study: 1, exercise: 5, sleep: 3, entertainment: 3, family: 3 },
    "2025-08-14": { study: 0, exercise: 1, sleep: 5, entertainment: 2, family: 2 },
    "2025-08-15": { study: 2, exercise: 2, sleep: 4, entertainment: 1, family: 1 },
    "2025-08-16": { study: 4, exercise: 3, sleep: 3, entertainment: 0, family: 0 },
    "2025-08-17": { study: 5, exercise: 4, sleep: 5, entertainment: 5, family: 5 },
    "2025-08-18": { study: 3, exercise: 5, sleep: 4, entertainment: 4, family: 4 },
    "2025-08-19": { study: 1, exercise: 1, sleep: 3, entertainment: 3, family: 3 },
    "2025-08-20": { study: 0, exercise: 2, sleep: 5, entertainment: 2, family: 2 },
    "2025-08-21": { study: 2, exercise: 3, sleep: 4, entertainment: 1, family: 1 },
    "2025-08-22": { study: 4, exercise: 4, sleep: 3, entertainment: 0, family: 0 },
    "2025-08-23": { study: 5, exercise: 5, sleep: 5, entertainment: 5, family: 5 },
    "2025-08-24": { study: 3, exercise: 1, sleep: 4, entertainment: 4, family: 4 },
    "2025-08-25": { study: 1, exercise: 2, sleep: 3, entertainment: 3, family: 3 },
    "2025-08-26": { study: 0, exercise: 3, sleep: 5, entertainment: 2, family: 2 },
    "2025-08-27": { study: 2, exercise: 4, sleep: 4, entertainment: 1, family: 1 },
    "2025-08-28": { study: 4, exercise: 5, sleep: 3, entertainment: 0, family: 0 },
    "2025-08-29": { study: 5, exercise: 1, sleep: 5, entertainment: 5, family: 5 },
    "2025-08-30": { study: 3, exercise: 2, sleep: 4, entertainment: 4, family: 4 },
    "2025-08-31": { study: 1, exercise: 3, sleep: 3, entertainment: 3, family: 3 },

    // 9月份数据（截至9月15日）
    "2025-09-01": { study: 0, exercise: 4, sleep: 5, entertainment: 2, family: 2 },
    "2025-09-02": { study: 2, exercise: 5, sleep: 4, entertainment: 1, family: 1 },
    "2025-09-03": { study: 4, exercise: 1, sleep: 3, entertainment: 0, family: 0 },
    "2025-09-04": { study: 5, exercise: 2, sleep: 5, entertainment: 5, family: 5 },
    "2025-09-05": { study: 3, exercise: 3, sleep: 4, entertainment: 4, family: 4 },
    "2025-09-06": { study: 1, exercise: 4, sleep: 3, entertainment: 3, family: 3 },
    "2025-09-07": { study: 0, exercise: 5, sleep: 5, entertainment: 2, family: 2 },
    "2025-09-08": { study: 2, exercise: 1, sleep: 4, entertainment: 1, family: 1 },
    "2025-09-09": { study: 4, exercise: 2, sleep: 3, entertainment: 0, family: 0 },
    "2025-09-10": { study: 5, exercise: 3, sleep: 5, entertainment: 5, family: 5 },
    "2025-09-11": { study: 3, exercise: 4, sleep: 4, entertainment: 4, family: 4 },
    "2025-09-12": { study: 1, exercise: 5, sleep: 3, entertainment: 3, family: 3 },
    "2025-09-13": { study: 0, exercise: 1, sleep: 5, entertainment: 2, family: 2 },
    "2025-09-14": { study: 2, exercise: 2, sleep: 4, entertainment: 1, family: 1 },
    "2025-09-15": { study: 4, exercise: 3, sleep: 3, entertainment: 0, family: 0 }
};

            // 初始化
            renderLifeHeatmap(lifeData);

            // 渲染热力图
            function renderLifeHeatmap(data) {
                const cellsContainer = document.getElementById('cells');
                const monthsContainer = document.getElementById('months');
                const daysContainer = document.getElementById('days');

                // 清空容器
                cellsContainer.innerHTML = '';
                monthsContainer.innerHTML = '';
                daysContainer.innerHTML = '';

                // 日期配置
                const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
                const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

                // 添加星期标签
                for (let i = 0; i < 7; i++) {
                    const dayEl = document.createElement('div');
                    dayEl.className = 'day';
                    dayEl.textContent = daysOfWeek[i];
                    daysContainer.appendChild(dayEl);
                }

                // 计算日期范围 - 过去365天
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                const oneYearAgo = new Date(today);
                oneYearAgo.setFullYear(today.getFullYear() - 1);
                oneYearAgo.setDate(oneYearAgo.getDate() + 1);

                // 调整开始日期为周日
                const dayOfWeek = oneYearAgo.getDay();
                const daysToSubtract = dayOfWeek;
                const startDate = new Date(oneYearAgo);
                startDate.setDate(oneYearAgo.getDate() - daysToSubtract);
                startDate.setHours(0, 0, 0, 0);

                // 计算结束日期为最近的周六
                const endDay = today.getDay();
                const daysToAdd = (6 - endDay + 7) % 7;
                const endDate = new Date(today);
                endDate.setDate(today.getDate() + daysToAdd);
                endDate.setHours(0, 0, 0, 0);

                // 计算总周数
                const totalDays = Math.ceil((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1;
                const totalWeeks = Math.ceil(totalDays / 7);

                // 生成月份标签
                let currentMonth = -1;
                let currentYear = -1;
                const monthElements = [];

                for (let week = 0; week < totalWeeks; week++) {
                    const weekStartDate = new Date(startDate);
                    weekStartDate.setDate(startDate.getDate() + week * 7);

                    const monthEl = document.createElement('div');
                    monthEl.className = 'month';

                    if (weekStartDate.getMonth() !== currentMonth || weekStartDate.getFullYear() !== currentYear) {
                        currentMonth = weekStartDate.getMonth();
                        currentYear = weekStartDate.getFullYear();
                        monthEl.textContent = monthNames[currentMonth];
                    }

                    monthsContainer.appendChild(monthEl);
                    monthElements.push(monthEl);
                }

                // 生成格子 - 按列（周）组织
                for (let week = 0; week < totalWeeks; week++) {
                    const weekColumn = document.createElement('div');
                    weekColumn.className = 'week-column';

                    for (let day = 0; day < 7; day++) {
                        const cellDate = new Date(startDate);
                        cellDate.setDate(startDate.getDate() + week * 7 + day);

                        // 检查是否在有效日期范围内
                        const isFuture = cellDate > today;
                        const isBeforeStart = cellDate < oneYearAgo;

                        const cellEl = document.createElement('div');
                        cellEl.className = 'cell';
                        cellEl.setAttribute('data-date', formatDate(cellDate));

                        if (isFuture || isBeforeStart) {
                            cellEl.style.visibility = 'hidden';
                        } else {
                            const dateStr = formatDateForData(cellDate);
                            const dayData = data[dateStr] || { study: 0, exercise: 0, sleep: 0, entertainment: 0, family: 0 };

                            // 计算平均分并四舍五入
                            const totalScore = dayData.study + dayData.exercise + dayData.sleep + dayData.entertainment + dayData.family;

                            // 根据总分范围确定颜色等级
                            let scoreClass = 'score-0';
                            if (totalScore >= 23) scoreClass = 'score-5';
                            else if (totalScore >= 21) scoreClass = 'score-4';
                            else if (totalScore >= 18) scoreClass = 'score-3';
                            else if (totalScore >= 10) scoreClass = 'score-2';
                            else if (totalScore >= 1) scoreClass = 'score-1';

                            // 设置颜色类
                            cellEl.classList.add(scoreClass);

                            // 设置悬停提示
                            const tooltipText = `${formatDate(cellDate)}\n\n学习: ${dayData.study}/5\n运动: ${dayData.exercise}/5\n睡眠: ${dayData.sleep}/5\n娱乐: ${dayData.entertainment}/5\n陪伴: ${dayData.family}/5\n\n总分: ${totalScore}/25`;
                            cellEl.setAttribute('data-tooltip', tooltipText);
                        }

                        weekColumn.appendChild(cellEl);
                    }

                    cellsContainer.appendChild(weekColumn);
                }
            }

            // 格式化日期显示
            function formatDate(date) {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}年${month}月${day}日`;
            }

            // 格式化日期用于数据查找
            function formatDateForData(date) {
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
        });
    </script>
</body>

</html>